<template>
	<view class="home">
		<view class="home-header">
			<view style="text-align: right;" @click="toSetup()">
				<uni-icon type="gear-filled" size="40"></uni-icon>
			</view>
			<view class="head-img">
				<image :src="userInfo.avatar?userInfo.avatar:defaultImg" class="head-img" style="width: 160upx; height: 160upx;"></image>
			</view>
			<text @click="login" v-if="this.accesstoken === ''" style="line-height: 60upx;">点击登录</text>
			<view v-else style="text-align: center;">
				<p style='margin-top: 10upx;'>昵称：{{userInfo.nickname}}</p>
				<view style='display: flex;width: 400upx;margin: 10upx auto;justify-content: space-between;'>
					<view style="line-height: 50upx;">余额：{{balanceInfo.balance}}元</view>
					<view><button class="btn" type="primary" @click="recharge">充值</button></view>
				</view>
			</view>
		</view>
		<view style="padding: 20upx;background-color: #FFFFFF;margin-top: 20upx;">
			<view class="order-item-title" @click="toMyOrder">
				<text>全部订单</text>
				<span>查看全部订单<uni-icon type="arrowright" size="30"></uni-icon></span>
			</view>
			<view class="branch">
				<view class="branch-item" @click="todetails()">
					<image class="branch-img" src="../../static/icon/orderList.png"></image>
					<p>全部订单</p>
				</view>
				<view class="branch-item" @click="todetails()">
					<image class="branch-img" src="../../static/icon/order-fu.png"></image>
					<p>待付款</p>
				</view>
				<view class="branch-item" @click="todetails()">
					<image class="branch-img" src="../../static/icon/order-fa.png"></image>
					<p>待发货</p>
				</view>
				<view class="branch-item" @click="todetails()">
					<image class="branch-img" src="../../static/icon/order-shou.png"></image>
					<p>待收货</p>
				</view>
				<view class="branch-item" @click="todetails()">
					<image class="branch-img" src="../../static/icon/order-ok.png"></image>
					<p>已完成</p>
				</view>
			</view>
		</view>
		<view class="line" style="margin-top: 10upx;" @click="toCollection()">
			<text>我的收藏</text>
			<span>
				<uni-icon type="arrowright" size="30"></uni-icon>
			</span>
		</view>
		<view class="line" @click="torechargeLog()">
			<text>充值记录</text>
			<span>
				<uni-icon type="arrowright" size="30"></uni-icon>
			</span>
		</view>
		<view class="line" @click="toaftersale()">
			<text>我的售后</text>
			<span>
				<uni-icon type="arrowright" size="30"></uni-icon>
			</span>
		</view>
		<view class="line" @click="toFx">
			<text>分销中心</text>
			<span>
				<uni-icon type="arrowright" size="30"></uni-icon>
			</span>
		</view>
		<view class="line" @click="toaddress()">
			<text>我的地址</text>
			<span>
				<uni-icon type="arrowright" size="30"></uni-icon>
			</span>
		</view>
		<view class="line" @click="toQrcode()">
			<text>我的二维码</text>
			<span>
				<uni-icon type="arrowright" size="30"></uni-icon>
			</span>
		</view>
		<view>
			<button v-if="this.accesstoken !== ''" type="primary" class="logout" @click="logOut">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				userInfo: {
					avatar: ''
				},
				balanceInfo: {
					balance: 0
				},
				userId: uni.getStorageSync('userId'),
				accesstoken: uni.getStorageSync('token'),
				defaultImg: '/static/logo.png'
			};
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				try {
					const token = uni.getStorageSync('token');
					const userId = uni.getStorageSync('userId');
					if (token) {
						this.accesstoken = token
						let params = {
							userId: userId
						}
						post('mobileapi/mobile/member/usercenter/showUserInfo', params, token).then(res => {
							if (res.code == 0) {
								this.userInfo = res.userinfo.userInfo
								this.balanceInfo.balance = res.userinfo.balanceInfo.balance
							} else {
								this.userInfo = {}
								this.balanceInfo.balance = 0
							}
						})
					}else{
						this.userInfo = {}
						this.balanceInfo.balance = 0
					}
				} catch (e) {
					// error
				}
			},
			torechargeLog() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/recharge/rechargeLog"
					})
				}
			},
			login() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			towithdraeal() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/withdraeal/index"
					})
				}
			},
			toaftersale() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/aftersale/index"
					})
				}
			},
			toMyOrder() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/myOrder/index"
					})
				}
			},
			todetails() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/myOrder/index"
					})
				}
			},
			toFx() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/distributioncenter/index"
					})
				}
			},
			toRecharge() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/recharge/Recharge"
					})
				}
			},
			recharge() {
				uni.navigateTo({
					url: "/pages/recharge/Recharge"
				})
			},
			toSetup() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/setup/index?nickname=" + this.userInfo.nickname + "&email=" + this.userInfo.email + "&mobile=" +
							this.userInfo.mobile + "&avatar=" + this.userInfo.avatar
					})
				}
			},
			toQrcode() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/qrcode/Qrcode?nickname=" + this.userInfo.nickname + '&avatar=' + this.userInfo.avatar
					})
				}
			},
			toaddress() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/address/index"
					})
				}
			},
			toCollection() {
				if (this.accesstoken === '') {
					this.prompt()
				} else {
					uni.navigateTo({
						url: "/pages/myCollection/index"
					})
				}
			},
			logOut() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认退出吗？',
					success: function(res) {
						if (res.confirm) {
							uni.setStorageSync('token', '')
							uni.setStorageSync('userId', '')
							uni.setStorageSync('checkAdd', '')
							that.accesstoken = ''
							that.getInfo();
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
				// this.getInfo()
				// uni.navigateBack(1);
			},
			uploadHImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			prompt() {
				uni.showToast({
					title: '请先登录'
				})
			}
		}
	}
</script>

<style>
	.home {
		font-size: 28upx
	}

	.home-header {
		background: #D7000F;
		padding: 20upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 30upx;
	}

	.head-img {
		height: 160upx;
		width: 160upx;
		margin: 0 auto;
		border-radius: 50%;
	}

	.order-item-title {
		display: flex;
		background: #ffffff;
		justify-content: space-between;
		line-height: 80upx;
		border-bottom: 1px solid #E6E6E6;
	}

	.ll {
		width: 60upx;
		height: 60upx;
		margin-left: 10px;
	}

	.line {
		display: flex;
		justify-content: space-between;
		padding: 20upx;
		margin-bottom: 1px;
		line-height: 50upx;
		background-color: #FFFFFF;
	}

	.logout {
		font-size: 32upx;
		margin: 100upx 10upx 0 10upx;
		background: #D7000F;
		border: 0px;
	}

	.branch {
		display: flex;
		margin-top: 20upx;
		font-size: 24upx;
	}

	.branch-item {
		text-align: center;
		flex: 1;
	}

	.branch-img {
		width: 40upx;
		height: 40upx;
	}

	.btn {
		border: 0;
		text-align: center;
		font-size: 30upx;
		border: none;
		display: inline-block;
		height: 48upx;
		line-height: 48upx;
		color: #D7000F;
		background: #FFFFFF;
	}

	.img {
		color: #FFFFFF;
	}
</style>
